<script setup lang="ts">
import type {MessageItemType} from "@/types/componentsType";

withDefaults(defineProps<MessageItemType>(), {
  time: "17:13",
  message_info: "tesajasjhdjkasdn",
  title: "测试",
  url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
  message_uid: 54545121
})
</script>

<template>
  <div class="message-item">
    <div>
      <el-image style="width: 40px; height: 40px;border-radius: 50%"
                :src="url" fit="cover"/>
    </div>
    <div class="message-info-time">
      <div class="message-info">
        <div class="title">{{ title }}</div>
        <div class="message-something">{{ message_info }}</div>
      </div>
      <div class="message-time">
        <div>{{ time }}</div>
        <div>
          <el-icon size="15">
            <i-ep-muteNotification/>
          </el-icon>
        </div>
      </div>
    </div>

    <div class="mark_message" :data-index="message_uid"></div>
  </div>
</template>

<style scoped lang="scss">
.message-item {
  box-sizing: border-box;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  cursor: default;
  width: 100%;
  position: relative;

  .mark_message {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
  }

  .message-info-time {
    width: calc(100% - 40px - 10px);
    padding-left: 10px;
    display: flex;
    align-items: center;
    /*  信息  */
    .message-info {
      width: 70%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: space-between;
      height: 40px;
      /*  群名字  */
      & > div {
        width: 100%;
        font-size: 14px;
        font-weight: bold;
      }

      /*  消息文字显示  */
      .message-something {
        width: 100%;
        font-size: 12px;
        font-weight: normal;
        white-space: nowrap; /* 禁止文本换行 */
        overflow: hidden; /* 隐藏溢出的文本 */
        text-overflow: ellipsis; /* 使用省略号来表示溢出的文本 */
        color: rgb(128, 128, 128);
      }
    }

    .message-time {
      flex: 1;
      color: rgb(128, 128, 128);
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: center;

      & > div {
        font-size: 12px;
      }
    }
  }

  &:hover {
    background-color: rgb(45, 45, 45);
  }

  &.active {
    background-color: rgb(0, 102, 204);


    .message-info-time {
      .message-info {

        .message-something {
          color: rgb(255, 255, 255);
        }
      }

      .message-time {
        color: rgb(255, 255, 255);
      }
    }
  }
}
</style>